<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>冠军竞猜</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		.wrap{
			width: 100%;
			height: 100%;
			background: url(/imgs/championBack.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
		}
		.guess_top{
			width: 90%;
			margin: 10px 0;
		}
		.country-wrap{
			position: relative;
			overflow-y: auto;
		}
		.country-line{
			display: flex;
			margin: 6px 0;
		}
		.country{
			flex: auto;
			padding: 5px;
		}
		.country img{
			width: 100%;
		}
		.hide{
			visibility: hidden;
		}
		.cup{
			position: fixed;
			top: 16%;
			width: 28%;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
		}
		.choose-yes{
			position: fixed;
			top: 16%;
			width: 28%;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			z-index: 20;
			display: none;
		}
		.chooseBack{
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 10px;
		}
		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 10;
			display: none;
		}
		.choose-img{
			width: 80%;
			padding-bottom: 10px;
			box-sizing: border-box;
		}
		.choose-btn{
			width: 90%;
		}
		
	</style>
	<body>
		<div class="wrap">
			<div class="mask"></div>
			<img class="guess_top" src="/imgs/championTop.png"/>
			<div class="country-wrap">
				<img class="cup" src="/imgs/cup.png"/>
				<div class="choose-yes">
					<img class="choose-img" src="/imgs/countryCircle/巴西.png"/>
					<img id="chooseBtn" class="choose-btn" src="/imgs/sureBtn.png"/>
				</div>

				<div class="country-line">
					@foreach($line1 as $key => $line)
						@if($key == 1) 
							<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
							<div class="country hide"><img src="/imgs/countryCircle/1.png"/></div>
						@elseif($key == 2)
							<div class="country hide"><img src="/imgs/countryCircle/1.png"/></div>
							<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
						@else
							<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
						@endif
					@endforeach
				</div>

				<div class="country-line">
					@foreach($line2 as $key => $line)
						@if($key == 1) 
							<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
							<div class="country hide"><img src="/imgs/countryCircle/1.png"/></div>
						@elseif($key == 2)
							<div class="country hide"><img src="/imgs/countryCircle/1.png"/></div>
							<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
						@else
							<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
						@endif
					@endforeach
				</div>

				<div class="country-line">
					@foreach($line3 as $key => $line)
						<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
					@endforeach
				</div>

				<div class="country-line">
					@foreach($line4 as $key => $line)
						<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
					@endforeach
				</div>

				<div class="country-line">
					@foreach($line5 as $key => $line)
						<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
					@endforeach
				</div>

				<div class="country-line">
					@foreach($line6 as $key => $line)
						<div cid="{{$line->id}}" class="country"><img src="/imgs/countryCircle/{{$line->id}}.png"/></div>
					@endforeach
				</div>

				<input type="hidden" class="country-input">
			</div>
		</div>
		
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
	<script src="{{asset('/js/layer_mobile/layer.js')}}" type="text/javascript" charset="utf-8"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		wx.config(<?php echo $js->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
		wx.ready(function(){
			wx.onMenuShareAppMessage({
			    title: '世界杯冠军竞猜', // 分享标题
			    desc: '乐游手游邀您一起参与世界杯冠军竞猜，赢百万银票奖励!', // 分享描述
			    link: '{{$url}}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: 'http://user.leyougame.cc/image/wc_champion.jpg', // 分享图标
			    type: 'link', // 分享类型,music、video或link，不填默认为link
			    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			    success: function () {
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () {
			        // 用户取消分享后执行的回调函数
			    }
			});

			wx.onMenuShareTimeline({
			    title: '世界杯冠军竞猜', // 分享标题
			    link: '{{$url}}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: 'http://user.leyougame.cc/image/wc_champion.jpg', // 分享图标
			    success: function () {
			    // 用户点击了分享后执行的回调函数
				},
			});

	   	});
	   	wx.error(function(res){

		});

	</script>
	<script type="text/javascript">
		// 设置滚动区域
		function setScrollHeight() {
			var myoffset = $('.country-wrap').offset()
			var myTop = Math.floor(myoffset.top)
			var scrollH = $(window).height() - myTop - 40
			$('.country-wrap').height(scrollH)
		}
		jQuery(function() {
			// 设置滚动区域
			setScrollHeight()

			// 设置背景图尺寸
			setBackGround()
			// 选择国旗
			$('.country').on('click', function() {
				// 样式
				$(this).addClass('chooseBack')
				$(this).siblings().removeClass('chooseBack')
				$(this).parent().siblings('.country-line').find('.country').removeClass('chooseBack')
				// 显示遮罩层和选择结果
				$(".country-input").val($(this).attr('cid'));
				$('.mask').show()
				$('.choose-img').attr('src', $(this).find('img').attr('src'));
				$('.choose-yes').show()
			})
			// 点击遮罩层关闭遮罩
			$('.mask').on('click', function() {
				console.log('关闭遮罩层')
				// 显示遮罩层和选择结果
				$('.mask').hide()
				$('.choose-yes').hide()
			})
			
			// 点击确定按钮
			$('#chooseBtn').on('click', function() {
				//询问框
				var thisDom = $(this)
				layer.open({
					content: '确定选择吗？'
					,btn: ['确定', '取消']
					,no: function(index) {
				    		console.log('用户点击了取消')
				      	layer.close(index)
					}
				    ,yes: function(index){
				    		console.log('用户点击了确定')
				      	layer.close(index)
				      	// 显示遮罩层和选择结果
						$('.mask').hide()
						$('.choose-yes').hide()
		                $.ajax({
		                    type: "POST",
		                    dataType: "json",
		                    url: '/mobile/worldcup/champion_choose/{{$user->id}}',
		                    data: {
		                    	cid: $(".country-input").val(),
		                        _token: "{{ csrf_token() }}"
		                    },
		                    success: function (data) {
		                    	if (data.flag) {
		                    		window.location.reload();
		                    	}
		                    }
		                }); 
				    }
				});
			})
		})
		// 设置背景图尺寸
		function setBackGround() {
			$('.wrap').height($(window).height())
			$('.wrap').width($(window).width())
		}
		
	</script>
	</body>
</html>
